{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
    <el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px"
        :label-position="labelPosition">
        <el-form-item label="选择专题" prop="special_id">
            <el-select v-model="form.special_id" placeholder="输入专题名后选择专题" filterable remote reserve-keyword
                :remote-method="searchSpecial" :loading="loadingSpecial">
                <el-option v-for="item in specialItems" :key="item.id" :label="'(专题ID:'+item.id+') '+item.title"
                    :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择企业" prop="company_id">
            <el-select v-model="form.company_id" placeholder="输入企业名后选择企业" filterable remote reserve-keyword
                :remote-method="searchCompany" :loading="loadingCompany">
                <el-option v-for="item in companyItems" :key="item.id" :label="'(企业ID:'+item.id+') '+item.title"
                    :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="是否展示" prop="status">
            <el-radio v-model="form.status" :label="1">展示</el-radio>
            <el-radio v-model="form.status" :label="0">隐藏</el-radio>
        </el-form-item>
        <el-form-item class="setting-item">
            <div class="setting-item-body px-3">
                <el-button type="primary" :loading="saveLoading" @click="submitForm('form')">保存</el-button>
            </div>
        </el-form-item>
    </el-form>
</div>
{/block}
{block name='script'}
<script>
    var rules = {
        special_id: [
            { required: true, message: '请选择专题' }
        ],
        company_id: [
            { required: true, message: '请选择企业' }
        ],
        status: [
            { required: true, message: '请选择展示状态' }
        ]
    };
    var specialItems = [];
    var companyItems = [];
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                view: XYBase.view,
                labelPosition: 'right',
                defaultProps: {
                    value: 'id',
                    label: 'title',
                    children: 'data',
                    checkStrictly: true
                },
                rules,
                specialItems,
                companyItems,
                loadingCompany: false,
                loadingSpecial: false,
                saveLoading: false,
                form: {
                    company_id: null,
                    special_id: null,
                    status: 0
                }
            }
        },
        methods: {
            searchSpecial(query) {
                let _this = this;
                this.loadingSpecial = true;
                $.ajax({
                    url: '/special_topic/recruit',
                    data: { title: query },
                    type: 'GET',
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            _this.specialItems = res.data.data;
                        } else if (res.msg != undefined) {
                            XYBase.error(res.msg);
                        } else {
                            XYBase.error('网络错误！');
                        }
                        _this.loadingSpecial = false;
                    }
                })
            },
            searchCompany(query) {
                let _this = this;
                this.loadingCompany = true;
                $.ajax({
                    url: '/company',
                    data: {
                        search_type: 'company_name',
                        key: query,
                        attestation: 'all',
                        vip_level: 'all',
                        pageSize: 20
                    },
                    type: 'GET',
                    success(res) {
                        console.log(res);
                        if (res.code != undefined && res.code == 0) {
                            _this.companyItems = res.data.data;
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg);
                        } else {
                            XYBase.error('网络错误！');
                        }
                        _this.loadingCompany = false;
                    }
                })
            },
            submitForm() {
                let _this = this;
                $.ajax({
                    url: '',
                    type: 'POST',
                    data: _this.form,
                    success(res) {
                        console.log(res);
                        if (res.code != undefined && res.code == 0) {
                            XYBase.success(res.msg);
                        } else if (res.code != undefined) {
                            XYBase.msg(res.msg);
                        } else {
                            XYBase.error('网络错误');
                        }
                    }
                })
            },
            initHtml() {
                var _this = this;
                this.searchCompany('');
                this.searchSpecial('');
                // _this.search.ajax = true;
            }
        },
        created() {
            XYBase.created(this);
        },
        mounted() {
            this.initHtml();
        },
    });
    $(function () {
        reloadWindowSize();
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
</script>
{/block}